<template>
    <div class="user" ref="user">
      <div class="user-cantainer">
        <div class="top">
          <!--登录状态-->
          <div class="isLogin" v-if="isLogin">
            <div class="btn-msg">
              <div class="caution"></div>
            </div>
            <div class="content">
              138****8888
            </div>
          </div>
          <!--非登录状态-->
          <div class="noLogin" v-if="!isLogin">
            <div class="btn-msg"></div>
            <div class="login" @click="$router.push('/login')">注册/登录</div>
          </div>
        </div>
        <div class="center">
          <div class="item">
            <div class="icon dyp"></div>
            <div class="text">电影票</div>
          </div>
          <div class="item">
            <div class="icon wxk"></div>
            <div class="text">我想看</div>
          </div>
          <div class="item ">
            <div class="icon yhj" @click="$router.push('/myCoupons')"></div>
            <div class="text">优惠券</div>
          </div>
        </div>
        <div class="bottom">
          <div class="item">
            <div class="left">收藏影院</div>
            <div class="right">2</div>
          </div>
          <div class="item" @click="$router.push('/saw')">
            <div class="left">我的已看</div>
            <div class="right">有电影待评价</div>
          </div>
          <div class="item" @click="$router.push('/feedback')">
            <div class="left">意见反馈</div>
            <div class="right"></div>
          </div>
          <div class="item" @click="$router.push('/setting')">
            <div class="left" >设置</div>
            <div class="right"></div>
          </div>
          <div class="item" @click="$router.push('/about')">
            <div class="left">关于我们</div>
            <div class="right"></div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    export default {
        name: "user",
        data(){
          return{
            isLogin:false
          }
        },
        mounted(){
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['user'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
        },
    }
</script>

<style scoped lang="stylus">
  .user
    height 100%
    user-select none
    .top
      position relative
      height 130px
      padding-top 12px
      background #171718
      margin-bottom 10px
      .isLogin
        position relative
        height 100%
        .btn-msg
          position absolute
          right 10px
          width 26px
          height 24px
          background url("msg.svg") no-repeat center/100% 100%
          .caution
            height 6px
            width 6px
            background #EEAC21
            border-radius 3px

        .content
          position relative
          top 38px
          text-align left
          line-height 54px
          height 54px
          padding-left 78px
          color #ffffff
          font-size 16px
          background url("avatar.svg")no-repeat 10px center /54px 54px
      .noLogin
        height 100%
        text-align center
        .btn-msg
          position absolute
          right 10px
          width 26px
          height 24px
          background url("msg.svg") no-repeat center/100% 100%
        .login
          position relative
          top 49px
          width 92px
          height 32px
          color #F9C40D
          font-size 16px
          border-radius 4px
          border 1px solid #F9C40D
          line-height 32px
          text-align center
          margin 0 auto
          &:active
            color #ffffff
            background #F9C40D
    .center
      display flex
      height 90px
      background #171718
      margin-bottom 10px
      .item
        flex 1
        &:active
          background #2e2f31
        .icon
          height 26px
          margin-bottom 4px
          margin-top 22px
          &.dyp
            background url("icon_dyp.svg")no-repeat center /26px 26px
          &.wxk
            background url("icon_wxk.svg")no-repeat center /24px 26px
          &.yhj
            background url("icon_yhj.svg")no-repeat center /32px 22px
        .text
          height 17px
          color #ACB1BB
          font-size 12px
          text-align center
    .bottom
      height 260px
      background #171718
      .item
        display flex
        height 52px
        &:active
          background #2e2f31
        .left
          flex  0 0 120px
          font-size 16px
          color #ffffff
          line-height 52px
          padding-left 10px
          text-align left
        .right
          flex 1
          color #F7C20F
          line-height 52px
          padding-right 34px
          font-size 14px
          text-align right
          background url("arrow_right.svg") no-repeat calc(100% - 14px) center/9px 17px
</style>
